<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>客户管理gl</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <link rel="stylesheet" href="/layui/css/formSelects-v4.css">
    <script src="/layui/layui.js"></script>
    <script src="/js/jquery.min.js"></script>
    <script src="/js/config.js"></script>


</head>
<body>
<h1>客户管理列表</h1>
<hr>
<form action="" class="layui-form">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-inline">
                <input type="text" id="khname" autocomplete="off" class="layui-input">
            </div>
        </div>
<div class="layui-inline">
    <label class="layui-form-label">机构名称</label>
    <div class="layui-input-inline" style="...">
        <select id="khSsjg" name="hello" xm-select="kh_ssjg" >
            <option value="-1">请选择</option>
        </select>
    </div>
</div>
        <button type="button" class="layui-btn" onclick="reloadData()" lay-submit="" lay-filter="demo1"><i class="layui-icon layui-icon-search"></i> 查询</button>

</div>
</form>
<table class="layui-hide" lay-filter="userTable"  id="userList"></table>
<script>
    $.get("http://localhost:8888/mechanism/search",function(data){
        $.each(data,function(){
            var opt = $("<option></option>").appendTo("#khSsjg");
            opt.text(this.jg_cljg).val(this.jg_cljg);
        });
        layui.formSelects.render();
    });
</script>
<!--<script src="/js/config.js"></script>-->
<script>
    var table ;
    function reloadData(){
        var roleIds = layui.formSelects.value('kh_ssjg','val');



        //执行重载
        table.reload('userList', {
            page: {
                curr: 1 //重新从第 1 页开始
            }
            ,where: {
                kh_name : $("#khname").val(),
                "kh_ssjg": roleIds.join(",")
            }
        });
    }

    layui.config({
        base: '/layui/'
    }).extend({
        formSelects: 'formSelects-v4'
    });

    layui.use(['table','form','formSelects'], function(){
        table = layui.table;
        var form = layui.form;
        var select = layui.formSelects;

        table.render({
            elem: '#userList'
            ,url:'http://localhost:8888/user/list'
            ,page: true
            ,even : true
            ,id : "userList"
            ,toolbar:'#toolbarDemo'
            ,cols: [[
                {field:'hello',type:'checkbox'},
                {field:'kh_Id', title: 'ID', sort: true}
                ,{field:'kh_name', title: '客户名称'}
                ,{field:'kh_jgdm',title:'机构代码'}
                ,{field:'kh_sshy',title:'所属行业'}
                ,{field:'kh_xydj',title:'信用等级'}
                ,{field:'kh_khlb',title:'客户类别'}
                ,{field:'kh_ssjg',title:'所属机构'}
                ,{field:'kh_khjl',title:'客户经理'},
                {toolbar: '#barDemo'}

            ]]
        });

    //监听行内的工具条
    table.on('tool(userTable)',function (obj) {
        var data = obj.data; //获得当前行数据
        var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）

        if(layEvent === 'del'){ //删除
            layer.confirm('真的删除行么', function(index){
                layer.close(index);
                $.post("http://localhost:8888/user/delete",{kh_Id:data.kh_Id},function(d){
                    table.reload("userList",{
                        page:{
                            curr:1
                        }
                    });
                });
            });
        }else if (layEvent === 'edit'){//TODO 编辑
            $.get('add.html',function (s) {
                layer.open({
                    type : 1,
                    title : '修改客户',
                    area:'800px',
                    content:s,
                    btn : ['确定','取消'],
                    success:function(){
                        //对表单回填数据
                        data.locked = data.locked == 0 ? null : data.locked;
                        form.val('guanliForm',data);

                        var rids = [];
                        for(let role of data.kh_ssjg){
                            rids.push(role.id);
                        }
                        var rids = [];
                        for(let role of data.kh_khjl){
                            rids.push(role.id);
                        }
                        var t =setInterval(function () {
                            console.log("waiting....");
                            if($("#khSsjg option").length > 1){
                                select.value('roles2',rids);
                                clearInterval(t);
                            }
                        },100)

                    },
                    yes : function () {
                        var str = $("#add_guanli_Form").serialize();
                        $.post(`${new Config().base_url}/user/edit`,str,function (data) {
                            layer.close(layer.index);
                            table.reload('userList');

                        });

                    }
                })
            })
        } else if (layEvent === 'detail'){

            $.get('mechanism.html',function (s) {
                layer.open({
                    type : 1,
                    title : '查看详情',
                    area:'800px',
                    content:s,
                    btn : ['确定','取消'],
                    success:function(){
                        //对表单回填数据
                    },
                    yes : function () {

                    }
                })
            })


        }
    });

        //头工具栏事件
        table.on('toolbar(userTable)', function(obj){
            switch(obj.event){
                case 'batchDelete': //批量删除
                    // var checkStatus = table.checkStatus(obj.config.kh_Id);
                    // var data = checkStatus.data;
                    // if (data.length == 0){
                    //     layer.msg('请选择要删除的数据行');
                    //     return;
                    // }
                    // layer.confirm("确定要删除选中的数据么？",function (index) {
                    //     var p = "?";
                    //     for (let role of data) {
                    //         p += `id=${role.kh_Id}&`;
                    //     }
                    //     $.post(`http://localhost:8888/user/batchDelete${p}`, d = > {
                    //         layer.close(index);
                    //     table.reload("userTable");
                    // });
                    // })
                    break;
                case 'add':
                    $.get("add.html",function (data) {
                        layer.open({
                            type : 1,
                            title : '添加客户',
                            skin : 'layui-layer-molv',
                            anim:0,
                            area : '800px',
                            maxmin:true,
                            content : data,
                            btn : ['确定','取消'],
                            yes : function () {
                                var str = $("#add_guanli_Form").serialize();
                                $.post(`${new Config().base_url}/user/add`,str,function (data) {
                                    layer.close(layer.index);
                                    table.reload('userList');
                                });
                            }
                        })

                    });
                    break;
                case 'isAll':
                    layer.msg(checkStatus.isAll ? '全选': '未全选');
                    break;
            };
        });
    });

</script>
<!--<script>-->
    <!--$.get("http://localhost:8888/role/search",function(data){-->
        <!--$.each(data,function(){-->
            <!--var opt = $("<option></option>").appendTo("#roles");-->
            <!--opt.text(this.name).val(this.id);-->
        <!--});-->
        <!--layui.formSelects.render();-->
    <!--});-->
<!--</script>-->
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add"><i class="layui-icon layui-icon-add-circle"></i> 添加</button>
        <button class="layui-btn layui-btn-sm" lay-event="batchDelete"><i class="layui-icon layui-icon-delete"></i> 批量删除</button>
        <button class="layui-btn layui-btn-sm" lay-event="import"><i class="layui-icon layui-icon-upload-drag"></i> 批量导入</button>
    </div>
</script>

<script type="text/html" id="barDemo">
    <a href="javascript:void(0)" lay-event="detail"><i class="layui-icon layui-icon-app"></i></a>
    <a lay-event="edit"><i class="layui-icon layui-icon-edit"></i></a>
    <a href="javascript:void(0)" lay-event="del"><i class="layui-icon layui-icon-delete"></i></a>
</script>
</body>
</html>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   